<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org/extras/dialect"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
      layout:decorate="layout/layout_info"
>
<head>
	<title>基本信息</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="../../static/asset/css/form.min.css" th:href="@{/asset/css/form.min.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/common/front.css" th:href="@{/asset/css/common/front.css}"/>
	<link rel="stylesheet" href="../../static/asset/css/front/user-center.css" th:href="@{/asset/css/front/user-center.css}"/>
</head>
<body>
<div layout:fragment="content" th:remove="tag">
	<div class="container-fluid display-flex p-0" style="flex: 1 1;">
		<div class="row no-gutters w-100">
			<div class="col-12 col-md-2" th:insert="layout/menus::submenu(${menus},0,'Front_Base_Info')" style="background: #3c3c3c;">
			</div>

			<div class="col-12 col-md-10">
				<div class="row no-gutters">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								基本信息
							</div>
							<div class="card-body">
								<div class="offset-lg-3 col-lg-6 offset-md-2 col-md-8 text-center my-3 my-md-5">
									<!--<div class="col-4">-->
									<a class="user-avatar" data-toggle="modal" href="#avatarModal" style="outline: none; width: 60px; height: 60px; overflow: hidden">
										<span>修改头像</span>
										<img src="../../static/asset/img/avatar.jpg" th:src="@{${#authentication.principal.avatar ?: '/asset/img/avatar.jpg'}}"
										     style="width: 60px; height: 60px;"
										     alt="">
									</a>
									<div class="user-avatar-tip">
										点击修改
									</div>

									<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-hidden="true">
										<div class="modal-dialog modal-lg" role="document">
											<div class="modal-content">
												<div class="modal-header">
													<h5 class="modal-title">上传头像</h5>
													<button type="button" class="close" data-dismiss="modal" aria-label="Close">
														<span aria-hidden="true">&times;</span>
													</button>
												</div>
												<div class="modal-body img-cropper-container">
													<div class="row no-gutters">
														<div class="col-8 img-cropper-original" style="position:relative">
															<div id="avatar-tips" style="position: absolute; z-index: 2; background: #fff; left: 0; right: 0;">
																点击“选择”按钮选择图片<br>点击“上传”按钮上传剪切后的图片
															</div>
															<img id="avatar-original" src="" alt="Picture" style="max-height: 300px;">
														</div>
														<div class="col-3 offset-1 img-preview text-center">
															<p>预览</p>
															<div style="border: 1px solid #ddd; width: 102px; height: 102px; margin-left: auto; margin-right: auto;">
																<div class="preview" style="width: 100px;"></div>
																<img id="avatar-previous" src="#" th:src="@{${#authentication.principal.avatar}}" width="100" height="100" alt=""
																     style="width: 100px; height: 100px;">
															</div>
															<small>100 &times; 100</small>
														</div>
													</div>
												</div>
												<div class="modal-footer">
													<span class="modal-message text-danger"></span>
													<label class="btn btn-secondary mb-0">选择
														<input id="cropper-file" type="file" class="d-none upload-logo-input">
													</label>
													<label id="upload-file" class="btn btn-primary mb-0">上传</label>
												</div>
											</div>
										</div>
									</div>
									<!--</div>-->
								</div>


								<form action="#" th:action="@{/information}" method="post" th:object="${user}" class="offset-lg-3 col-lg-6 offset-md-2 col-md-8 ">
									<div class="form-group row">
										<label for="username" class="col-sm-3 col-form-label">用户名</label>
										<div class="col-sm-9">
											<input id="username" name="username" class="form-control-plaintext" value="--" th:value="${user.username}" type="text" readonly>
										</div>
									</div>

									<div class="form-group row">
										<label for="nickname" class="col-sm-3 col-form-label">昵称</label>
										<div class="col-sm-9">
											<input th:if="${!#lists.contains(disabledFields, 'nickname')}" id="nickname" name="nickname" class="form-control" value="--"
											       th:value="${user.nickname}" required data-msg-required="不能为空">

											<input th:if="${#lists.contains(disabledFields, 'nickname')}" id="nickname" name="nickname" class="form-control-plaintext" value="--"
											       th:value="${user.nickname}" type="text" readonly>

											<div class="form-control-feedback text-danger" th:if="${#fields.hasErrors('nickname')}" th:text="${#fields.errors('nickname')}"
											>
												<!--th:text=" ${#fields.errors('nickname')}"-->
												<!--th:if="${#fields.hasErrors('*{nickname}')}"-->
											</div>
										</div>
									</div>


									<div class="form-group row">
										<label for="realName" class="col-sm-3 col-form-label">真实姓名</label>
										<div class="col-sm-9">
											<input th:if="${!#lists.contains(disabledFields, 'realName')}" id="realName" name="realName" class="form-control" value="--"
											       th:value="${user.realName}" required data-msg-required="不能为空">

											<input th:if="${#lists.contains(disabledFields, 'realName')}" id="realName" name="realName" class="form-control-plaintext" value="--"
											       th:value="${user.realName}" type="text" readonly>

											<!--<div class="form-control-feedback text-danger" th:if="${#fields.hasErrors('realName')}" th:errors="*{realName}"></div>-->

											<div class="form-control-feedback text-danger" th:text="${#fields.errors('realName')}" th:unless="${not #fields.hasErrors('realName')}"></div>
										</div>
									</div>

									<div class="form-group row">
										<label for="realName" class="col-sm-3 col-form-label">证件类型</label>
										<div class="col-sm-9">
											<select th:if="${!#lists.contains(disabledFields, 'cardType')}" id="cardType" name="cardType" class="form-control" required data-msg-required="不能为空">
												<th:block th:each="type : ${T(tmt.usercenter.web.domain.enums.IdCardType).values()}">
													<th:block th:if="${type == user.cardType}">
														<option th:value="${type}" th:text="${type.typeName}" selected="selected">
													</th:block>
													<th:block th:if="${type != user.cardType}">
														<option th:value="${type}" th:text="${type.typeName}">
													</th:block>
												</th:block>
											</select>

											<p th:if="${#lists.contains(disabledFields, 'cardType')}" class="form-control-plaintext">
												<th:block th:each="type : ${T(tmt.usercenter.web.domain.enums.IdCardType).values()}">
													<th:block th:if="${type == user.cardType}" th:text="${type.typeName}"></th:block>
												</th:block>
											</p>

											<input th:if="${#lists.contains(disabledFields, 'cardType')}" id="cardType" name="cardType" class="form-control-plaintext" value="--"
											       th:value="${user.cardType}" type="hidden" readonly>

										</div>
									</div>


									<div class="form-group row">
										<label for="idCardNum" class="col-sm-3 col-form-label">证件号码</label>
										<div class="col-sm-9">
											<input th:if="${!#lists.contains(disabledFields, 'idCardNum')}" id="idCardNum" name="idCardNum" class="form-control" value="--"
											       th:value="${user.idCardNum}" required data-msg-required="不能为空">

											<input th:if="${#lists.contains(disabledFields, 'idCardNum')}" id="idCardNum" name="idCardNum" class="form-control-plaintext" value="--"
											       th:value="${user.idCardNum}" type="text" readonly>
										</div>

									</div>
									<div class="form-group row">
										<label for="birthday" class="col-sm-3 col-form-label">出生日期</label>
										<div class="col-sm-9">
											<div th:if="${!#lists.contains(disabledFields, 'birthday')}" class="input-group" data-type="datetime-picker">
												<input id="birthday" name="birthday" type="text" class="form-control" th:attr="data-date=${#dates.format(user.birthday, 'yyyy-MM-dd')}"
												       th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}"
												       data-mask-input="true" data-format="yyyy-MM-dd" data-pick-time="false">
												<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
											</div>


											<input th:if="${#lists.contains(disabledFields, 'birthday')}" id="birthday" name="birthday" class="form-control-plaintext" value="--"
											       th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}" type="text" readonly>

											<div class="form-control-feedback text-danger" th:if="${#fields.hasErrors('birthday')}" th:text="${#fields.errors('birthday')}"></div>
										</div>
									</div>

									<div class="form-group row">
										<div class="offset-md-4 col-md-4 px-5">
											<input class="btn btn-primary btn-block" type="submit" value="提交">
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<th:block layout:fragment="script">
	<script type="text/javascript" src="../../static/asset/js/form.min.js" th:src="@{/asset/js/form.min.js}"></script>
	<script type="text/javascript" src="../../static/asset/js/common/image-cropper.js" th:src="@{/asset/js/common/image-cropper.js}"></script>
	<script th:inline="javascript">
        /*<![CDATA[*/
        $(function () {
            App.initDatetimePicker();
            $('form').validate({
                errorElement: 'div',
                errorClass: 'text-danger form-control-feedback',
            });

            var imageCropper;
            $('#avatarModal').on('shown.bs.modal', function () {
                imageCropper = $('#avatar-original').imageCropper({
                    fileSelector: '#cropper-file',
                    confirmSelector: '#upload-file',
                    preview: '#avatarModal .preview',
                    aspectRatio: 1,
                    onSelect: function () {
                        $('#avatar-tips').hide();
                        $('#avatar-previous').hide();
                    },
                    onConfirm: function (e) {
                        $('#avatarModal').modal('hide');
                        App.alertProcess('', '正在上传');

                        var data = e.toDataURL();
                        var avatarEdit = /*[[@{/edit/avatar}]]*/ '';
                        $.ajax(avatarEdit, {
                            method: "POST",
                            data: {avatar: data},
                            success: function (result) {
                                App.handleAjax(result, function () {
                                    swal('', '上传成功', 'success');
                                    $('.user-avatar img').removeAttr('src').attr('src', result.data + '?v=' + Math.random());
                                }, function () {
                                    swal('', '上传失败', 'error');
                                });
                            }
                        });
                    }
                });
            })
        })
        /*]]>*/
	</script>
</th:block>
</body>
</html>
